<template>
  <div class="input_search">
    <Input v-model="value" :placeholder="placeholder" @focus.native.capture="inputFocus" @blur.native.capture="inputBlur" suffix="ios-search"></Input>
    <div class="select_box" v-show="isView && renderList && renderList.length > 0">
      <p v-for="(item, index) in renderList" class="list_item" @click="changeItem(item)" :key="index + 's'" v-html="item.showName"></p>
    </div>
  </div>
</template>

<script>
// 节流输入框
// eslint-disable-next-line func-names
const delay = (function () {
  let timer = 0
  // eslint-disable-next-line func-names
  return function (callback, ms) {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()

export default {
  name: 'HsEleSearchHignInput',
  data() {
    return {
      value: '',
      isView: false,
      renderList: [] // 渲染的列表
    }
  },
  watch: {
    value(val) {
      delay(() => {
        this.$emit('changeVal', val) // 输入框变化，父组件根据需求去改变渲染列表
      }, 500)
    },
    list(val) {
      // this.renderList = val;
      this.hignLingt(val)
    }
  },
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    // 需要高亮的属性(不传默认高亮当前项，如果当前项不是字符串则不会高亮)
    hignKey: {
      type: String,
      default: ''
    },
    // 高亮颜色
    color: {
      type: String,
      default: 'red'
    },
    // 传入的列表
    list: {
      type: Array,
      default: () => []
    }
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    changeItem(item) {
      this.value = item[this.hignKey]
      this.$emit('changeSelect', item)
    },
    // 判断是否是基本数据类型
    isBasicType(val = '') {
      const t = Object.prototype.toString.call(val)
      if (
        t === '[object String]' ||
        t === '[object Boolean]' ||
        t === '[object Number]' ||
        t === '[object Null]' ||
        t === '[object Undefined]' ||
        t === '[object Symbol]'
      ) {
        return true
      }
      return false
    },
    hignLingt(val) {
      this.renderList = val.map((item) => {
        if (!this.hignKey && !isBasicType(item)) return
        let html = this.hignKey ? `${item[this.hignKey]}` : `${item}`
        html = html.replaceAll(this.value, `<span style="color:${this.color}">${this.value}</span>`)
        /* eslint-disable */
        item.showName = html
        return item
      })
    },

    // 获取焦点获取下拉框数据
    inputFocus() {
      this.isView = true
    },
    // 鼠标离开事件比点击事件执行快
    inputBlur() {
      setTimeout(() => {
        this.isView = false
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.input_search {
  /deep/.ivu-input {
    width: 280px;
    height: 40px;
    border-radius: 3px;
  }
  .select_box {
    width: 280px;
    background-color: #fff;
    padding: 16px;
    margin-top: 5px;
    border-radius:4px;
    max-height: 296px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
    overflow-y: auto;
    overflow-x: hidden;
    cursor: pointer;
    .list_item {
      font-size: 16px;
      color: #666;
      margin: 0 0 24px 0;
      overflow: hidden; //超出一行文字自动隐藏
      text-overflow: ellipsis; //文字隐藏后添加省略号
      white-space: nowrap; //强制不换行
    }
    .list_item:last-child {
      margin: 0;
    }
  }
}
</style>
